<template>
  <div class="Seats">
    <div class="Seats-head">
      <div class="Seats-head-td">
        <div class="sit bg-sit"></div>
        <div>可选座位</div>
      </div>
      <div class="Seats-head-td">
        <div class="sit bg-sited"></div>
        <div>已售座位</div>
      </div>
      <div class="Seats-head-td">
        <div class="sit bg-temp"></div>
        <div>已选座位</div>
      </div>
    </div>

    <div class="screen-container"></div>

    <div class="screen-title">银幕中央</div>

    <div
      v-for="(item, i) in list"
      class="row"
      style="margin-left: 15%;"
      :key="i"
    >
      <div class="sit bg-nosit" style="margin-right:50px">
        {{ i + 1 }}
      </div>
      <div
        @click="selectSeat(item1, i, j)"
        :class="[
          'sit',
          { 'bg-temp': item1 == 3 },
          { 'bg-sited': item1 == 2 },
          { 'bg-sit': item1 == 1 },
          { 'bg-nosit': item1 == 0 },
        ]"
        v-for="(item1, j) in item"
        :key="j"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Seats-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  .Seats-head-td {
    display: flex;
    align-items: center;
    margin: 0 10px;
    div {
      font-size: 14px;
    }
  }
}
/* 屏幕 */
.screen-container {
  width: 100%;
  height: 40px;
  background: url("../../assets/images/screen.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.screen-title {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin: 20px;
}

.row {
  display: flex;
  align-items: center;
}
/* 可选座位 */
.bg-sit {
  background-image: url("../../assets/images/bg-sit.png");
}

/* 已售座位 */
.bg-sited {
  /* background-color: red; */
  background-image: url("../../assets/images/bg-sited.png");
}

/* 已选座位 */
.bg-temp {
  background-image: url("../../assets/images/bg-temp.png");
}
.sit {
  height: 30px;
  width: 30px;
  min-height: 10px;
  min-width: 10px;
  margin: 4px 4px 4px 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  /* border: 1px solid black; */
}

.bg-sit:hover {
  cursor: pointer;
}

/* 空位置 */
.bg-nosit {
  text-align: center;
  line-height: 30px;
}

/* 已选座位号 */
.select-sit {
  border: 2px orange solid;
  border-radius: 10px;
  margin-left: 10px;
  padding: 4px 10px 4px 10px;
  background-color: rgba(255, 0, 0, 0.2);
}
</style>

<script>
import bus from '../../bus/index'
export default {
  data() {
    return {
      // 座位状态数组
      list: [
        [1, 1, 2, 2, 1, 0, 1, 2, 1, 1],
        [1, 1, 2, 2, 1, 2, 1, 2, 1, 0],
        [1, 1, 2, 2, 1, 0, 1, 2, 1, 1],
        [1, 1, 2, 0, 1, 0, 1, 2, 1, 1],
        [0, 1, 2, 2, 1, 0, 1, 2, 1, 2],
        [0, 1, 2, 2, 1, 0, 1, 2, 1, 0],
        [0, 1, 2, 2, 1, 2, 1, 2, 1, 1],
        [1, 1, 2, 2, 1, 2, 1, 2, 1, 0],
        [1, 1, 2, 2, 1, 1, 1, 2, 1, 0],
        [1, 1, 2, 2, 1, 1, 1, 2, 1, 0],
      ],
      // 已选座位数
      seatCount: 0,
    };
  },
  methods: {
    // 选座时触发
    selectSeat(data, x, y) {
    //   console.log(data, x, y);
      if (data == 1 && this.seatCount < 6) {
        this.list[x][y] = 3;
        this.seatCount++;
        this.list = this.list.filter((item) => item);
        bus.$emit('changetags', `${x + 1}排${y + 1}座`, true)
      } else if (data == 3) {
        this.list[x][y] = 1;
        this.seatCount--;
        bus.$emit('changetags', `${x + 1}排${y + 1}座`, false)
        this.list = this.list.filter((item) => item);
      } else {
        if (this.seatCount == 6) {
          this.$message({
            message: "最多订购6张票O~~",
            type: "warning",
          });
        }
      }
    },
  },
    created() {
        bus.$on('deltags', (x, y) => {
            this.selectSeat(3, x, y)
        })
    }
};
</script>
